<template>
	<view class="content">
		<uni-nav-bar statusBar="true" 
		leftIcon="back"
		@click-left="clickLeft" 
		:fixed="true" 
		:border="false" 
		backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<view class="">
					{{i18n.power}}
				</view>
				<view class=""  @tap.stop="jumpMyPower">
					{{i18n.MyHashratePlan}}
				</view>
			</view>
		</uni-nav-bar>
		<view class="list">
			<view class="li animated bounceInUp fast" v-for="(item, index) in list" :key="index">
				<view class="left" style="background-image: url('/static/imgs/invest-icon01.png');background-size: contain;background-repeat: no-repeat;">
					<view class="top">
						<text>{{item.freeze}}USD</text>
						<text class="red">
							<!-- <text>算力值</text>: {{item.sl}} -->
							<!-- <text>+22.4%</text> -->
						</text>
					</view>
					<view class="bottom">
						<!-- <text>需要:{{item.freeze}} SPOC</text>
						<text>日产币:{{item.day_cb}}</text>
						<text>有效时间:{{item.day_yx}}</text> -->
						<text>{{item.freeze}}USD</text>
						<text>{{i18n.lowRisk}}</text>
						<text>{{i18n.StableGrowth}}</text>
					</view>
				</view>
				<view class="right" :class="{'gary':item.status=='0'}" @tap="handleClickBuy(item)">
					<view hover-class="hover-class" class="inner">
						<text>
							 {{item.lun>0?i18n.DoubleInvestment:i18n.ExchangeComputingPower}}
						<!-- {{item.id=='1' ?'续期' : '兑换'}} -->
						</text>
						<text>{{item.lun>0?'Reinvestment':'Exchange'}}</text>
					</view>
				</view>
			</view>
		<!-- 	<view class="myplan" hover-class="hover-class">
				{{i18n.MyHashratePlan}}
			</view> -->
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Load from '../../components/common/load.vue';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	export default {
		computed:{
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType'
			])
		},
		components:{
			uniNavBar,Load
		},
		data() {
			return {
				showLoad:false,
				list:[]
			};
		},
		onShow(){
			this.getList()
			forceUpdate(this.getLangType);
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			jumpMyPower(){
				uni.navigateTo({
					url:'/pages/power/my-power'
				})
			},
			handleClickBuy(item){
				if(item.status=='0'){
					return
				}
				uni.navigateTo({
					url:`/pages/power/buy-power?item=${JSON.stringify(item)}`
				})
			},
			getList(){
				let url = this.getRequestUrl + '/api/Shop/shop_list'
				let data = {
					id : this.getLoginInfo.id,
					token : this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					if(res.data.code==1){
						this.list = res.data.data;
						this.list.forEach((item,index)=>{
							item.freeze = parseFloat(item.freeze)
						})
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #eff3f7;
	}
</style>
<style lang="scss">
	.content{
		.index-top-nav-title{
			font-size: 30upx;
			font-weight: bold;
			color: #000000;
			margin-left: -50upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			view{
				&:last-child{
					background-color: #007AFF;
					color: #fff;
					width: 170upx;
					text-align: center;
					font-size: 24upx;
					height: 60upx;
					line-height: 60upx;
					border-radius:30upx;
				}
			}
		}
		.list{
			padding: 0 30upx;
			margin-top: 30upx;
			.li {
				background-color: #FFFFFF;
				width: 690upx;
				height: 202upx;
				margin-bottom: 20upx;
				border-radius: 10upx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.left {
					display: flex;
					justify-content: center;
					flex-direction: column;
					padding-left: 20upx;
					flex: 1;
					.top {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 20upx;
						text {
							font-size: 30upx;
							color: #000000;
							font-weight: bold;
						}
						.red {
							color: #FF3C3C;
							margin-left: 20upx;
							font-size: 15px;
							font-weight: 100;
							text {
								font-size: 13px;
								color: #FF3C3C;
							}
						}
						.green {
							font-weight: 100;
							color: #57b567;
							margin-left: 20upx;
							font-size: 15px;
							text {
								font-size: 13px;
								color: #FF3C3C;
							}
						}
					}
					.bottom {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						text {
							background-color: #e6f1fc;
							border-radius: 10upx;
							color: #2581fe;
							font-size: 11px;
							padding: 10upx 16upx;
							margin-right: 20upx;
							margin-bottom: 10upx;
						}
					}
				}
				.right {
					width: 202upx;
					height: 202upx;
					border-top-right-radius: 10upx;
					border-bottom-right-radius: 10upx;
					background: linear-gradient(45deg, #0c48e0, #2aa2ff);
					&.gary{
						background:gray;
						text:last-child {
							color: #FFFFFF;
						}
					}
					.inner {
						transition: all .3s ease;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						height: 100%;
					}
					text:first-child {
						color: #FFFFFF;
						font-weight: bold;
						font-size: 20px;
						margin-bottom: 8upx;
					}
					text:last-child {
						font-size: 12px;
						color: #6cb1f9;
					}
				}
			}
			.myplan {
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				width: 450upx;
				height: 80upx;
				border-radius: 80upx;
				text-align: center;
				line-height: 80upx;
				background-color: #1D7DFF;
				color: #FFFFFF;
				font-size: 15px;
				transition: all .3s ease;
				margin-top: 60upx;
				margin-bottom: 60upx;
			}
		}
	}
</style>
